<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../res/js/sweetalert2.js"></script>


</head>

<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-inline">
        <input class="layui-input" name="name" id="name" placeholder="角色名称" autocomplete="off">
    </div>

    <input type="button" id="seachTable" class="layui-btn" value="搜索"/>
   <!-- lay-event ="addTable" layui ID样式-->
    <input type="button" lay-event ="addTable" class="layui-btn layui-btn-primary" value="添加"/>

</script>

<script type="text/html" id="barDemo">
    {{# if(d.roleId!=1) { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# } else{}}
    <a class="layui-btn layui-btn-disabled layui-btn-xs">修改</a>
    {{# } }}
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="roleResult" value="{{d.roleId}}" lay-skin="switch" lay-text="有效|无效" lay-filter="lockDemo" {{ d.roleId == 1 ? 'disabled' : '' }} lay-filter="lockDemo" {{ d.roleResult == 1 ? 'checked' : '' }} >
</script>
<!--

<div id="addReload">

    <div id="addOperation">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>角色增加列表</legend>
        </fieldset>
        <form class="layui-form" action="../../role/addRole.action" method="post"  >

            &lt;!&ndash; 角色名称&ndash;&gt;
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="roleName" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
            </div>


            &lt;!&ndash; 备注 &ndash;&gt;
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="gameName" id="roleRemark" lay-verify="title"
                           autocomplete="off" placeholder="备注" class="layui-input">
                </div>
            </div>

            &lt;!&ndash; 是否有效&ndash;&gt;
            <div class="layui-inline">
                <label class="layui-form-label">是否有效</label>
                <div class="layui-input-inline ">
                    <select name="modules" lay-verify="required" lay-search="">
                        <option value="">请选择</option>
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select>
                </div>
            </div>

            &lt;!&ndash; 排序 &ndash;&gt;
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="roleSort" id="roleSort" lay-verify="title"
                           autocomplete="off" placeholder="排序" class="layui-input">
                </div>
            </div>

            &lt;!&ndash; 创建时间 &ndash;&gt;
            <div class="layui-inline">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="roleCreateDate" id="roleCreateDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色模块</label>
                    <div style="display: inline-block; width: 270px; height: 100%; padding: 10px; overflow: auto;" >
                        <input type="hidden" id="moduleIds" name="moduleIds" >
                        <ul id="updateModuleTree"></ul>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="submit" class="layui-btn"  value="提交">
                    <button id="closeUpdate" type="reset" class="layui-btn layui-btn-primary" >取消</button>
                </div>
            </div>
        </form>
    </div>-->




<script>

    var table2 = null;

   // layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element','tree'], function(){
    layui.use(['form','table'],function(){
        var table = layui.table
            ,form = layui.form;

        table2 = table.render({
            elem: '#test'//指定原始表格元素选择器（推荐id选择器）
            , url: '../../role/findAll.form' //地址
            , toolbar: '#toolbarDemo' //开启表格头部工具栏区域
            , title: '角色模块'
            , cols: [[
               /* {type: 'checkbox', fixed: 'left'}
                , {field: 'roleId', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                ,*/ {field: 'roleName', title: '角色名称', width: 120, edit: 'text'}
                , {field: 'roleRemark', title: '备注', width: 80, edit: 'text', sort: true}
                , {field: 'roleResult', title: '是否有效', width: 100, toolbar: '#checkboxTpl'}
                ,{field: 'roleSort', title: '排序', width: 100}
                , {
                    field: 'roleCreateDate',
                    title: '创建时间',
                    width: 100,
                    templet: "<div>{{layui.util.toDateString(d.roleCreateDate, 'yyyy-MM-dd')}}</div>"
                }
                , {field: 'roleCreateUser', title: '创建人', width: 100}
                //,{field:'flowerImg', title:'图片', width:80 , templet:"#img" , sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true,//开启分页\
            limits: [3, 5, 10],
            limit: 10, // 默认5条数据一页


        });
        //监听效果操作
        form.on('switch(lockDemo)', function(obj){
           // alert(obj.);

            Swal.fire({
                title: '是否修改此状态？',
                text: "是否要修改这条数据的状态吗？",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '修改',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                var data={roleId:this.value,roleResult:0};
                if(obj.elem.checked){
                    data.roleResult=1;
                }
                var url ="../../role/result.form";
                $.post(url,data,function (objs) {

                    if(objs==1){

                        $(".layui-laypage-btn").click()//刷新当前页面
                    }else{
                        Swal.fire({
                            type: 'error',
                            title: '错误！',
                            text: '修改失败'
                        })
                    }

                },"json");
            }else{

                $(".layui-laypage-btn").click()//刷新当前页面
            }
        });

        });



     <!-- 给要模糊查询的文本框赋值-->
    $(function() {

        /* 搜索 */
        $("#seachTable").on("click", function() {



            table2.reload({
                where : {
                    roleName : $("#name").val()
                }
            });
        });



    });


       table.on('tool(test)',function(obj) {

            //var checkStatus = table.checkStatus(obj.config.id);

           var data = obj.data //获得当前行数据
               ,layEvent = obj.event; //获得 lay-event 对应的值
           if(layEvent === 'edit'){
               layer.msg('编辑操作');
               layer.open({
                   type: 2,
                   title: '操作',
                   shadeClose: true,
                   shade: false,
                   maxmin: true, //开启最大化最小化按钮
                   area: ['893px', '600px'],
                   content: 'RoleModle.html?id=' + data.roleId,
                   end : function() {
                       table2.reload();//渲染
                   }

               });
           }



        });

        table.on('toolbar(test)',function(obj) {

            switch (obj.event) {
                case 'addTable'://增加
                    layer.open({
                        type : 2,
                        title : '增加页面',//标题
                        shadeClose : true,
                        shade : 0.3,//背景阴影
                        area : [ '80%','80%' ],//大小
                        content : 'RoleModle.html', //iframe的url
                        end : function() {
                            table2.reload();//渲染
                        }
                    });
                    break;


            };

        });



        });







</script>



</body>

</html>